<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxLayout="column">
    <div>
        <button
            mat-button
            mat-raised-button
            color="accent"
            (click)="createUser()"
        >
            <i class="material-icons">add</i
            ><span>&nbsp;New Service Account</span>
        </button>
    </div>
    <div fxFlex="100" fxLayout="column">
        <sp-table
            *ngIf="dataSource"
            data-cy="security-service-config"
            [dataSource]="dataSource"
            [columns]="displayedColumns"
            matSort
        >
            <ng-container matColumnDef="username">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Username
                </th>
                <td mat-cell *matCellDef="let account">
                    <b>{{ account.username }}</b>
                </td>
            </ng-container>

            <ng-container matColumnDef="edit">
                <th mat-header-cell *matHeaderCellDef class="text-right">
                    Actions
                </th>
                <td mat-cell *matCellDef="let account">
                    <div fxLayout="row">
                        <span
                            fxFlex
                            fxFlexOrder="3"
                            fxLayout="row"
                            fxLayoutAlign="end center"
                        >
                            <div class="mr-15">
                                <button
                                    color="accent"
                                    mat-button
                                    mat-raised-button
                                    matTooltip="Edit user"
                                    matTooltipPosition="above"
                                    data-cy="service-edit-btn"
                                    (click)="editService(account)"
                                >
                                    <i class="material-icons">edit</i>
                                    <span>&nbsp;Edit</span>
                                </button>
                            </div>
                            <button
                                color="warn"
                                mat-button
                                mat-raised-button
                                matTooltip="Delete service"
                                matTooltipPosition="above"
                                data-cy="service-delete-btn"
                                (click)="deleteUser(account)"
                            >
                                <i class="material-icons">delete</i>
                                <span>&nbsp;Delete</span>
                            </button>
                        </span>
                    </div>
                </td>
            </ng-container>
        </sp-table>
    </div>
</div>
